// 轮播图
/*
    实现功能
    1、自动切换图片 保证小圆点跟随
    2、上一张下一张点击切换图片  小圆点也需要跟随
    3、点击小圆点 切换到对应的图片
*/
//定义一个变量 index,表示显示的是第几张，初始值为0，默认显示第一张；
let index = 0;
let ulDom = document.querySelectorAll(".banner ul li");
let olDom = document.querySelectorAll(".banner ol li");
let boxDom = document.querySelector(".banner");
//约定type = 
// true，表示切换下一张
// false，表示切换上一张
// 数字，表示点击的是小圆点对应的图片
function changeOne(type) {
    // 让当前这张消失
    ulDom[index].className = "";
    olDom[index].className = "";
    // console.log(typeof type);
    // console.log(type);
    // console.log(3===true);
    if (type === true) {
        index++
        // console.log(11)
    } else if (type === false) {
        index--
        // console.log(222)
    } else {
        // console.log(3)
        index = type;
    };

    //判断index边界值
    // index++到最大值时，归零，来显示第一张
    if (index >= ulDom.length) {
        index = 0
    }
    //index--到0时，值为索引长度-1，来显示最后一张
    if (index < 0) {
        index = ulDom.length - 1;
    }

    //显示当前图片
    ulDom[index].className = "current";
    olDom[index].className = "current";
}

// 自动轮播
// let timer = setInterval(function () {
//     changeOne(true);
// }, 1000)

// let timer1; //保存定时器标识
function timer() {
    timer1 = setInterval(function () {
        changeOne(true)
    }, 3000)
};
//自动轮播
timer();

//点击事件
boxDom.addEventListener("click", function (e) {
    // console.log(1111)
    // 判断点击的是那个按钮
    // 左
    // console.log(e.target);
    if (e.target.className === "left") {
        // console.log("left")

        changeOne(false);
    }
    // 右
    if (e.target.className === "right") {
        // console.log("right")

        changeOne(true);
    }

    // 圆点
    if (e.target.dataset.name === "point") {
        let i = e.target.dataset.i - 0; //，取来的是字符串，-0做数学运算转换为数字
        // console.log(e.target.dataset.i - 0)
        changeOne(i)
    }
});
// 鼠标划入停止轮播
boxDom.onmouseover = function () {
    //清除定时器
    clearInterval(timer1);
};
// 鼠标移出，开始轮播
boxDom.onmouseout = function () {
    timer();
};

//攻略数据
axios.post(
    'http://39.98.112.34:8000/introduction/index',
    // {mobile:mobile.value,password:pwd.value}
).then((res) => {
    let response = res.data;
    // console.log(response.data)
    let html = '';
    response.data.forEach(function (item, i) {
        // i++;
        // console.log(i)
        // 展示三条数据
        if (i <= 2) {
            html += `
                <a href='detail.html?id=${item.id}'>
                    <dl>
                    <dt><img src="${item.coverImg}" alt=""></dt>
                    <dd><h3>${item.cityName}</h3></dd>
                    <dd><p>${item.content}</p></dd>
                    </dl>
                </a>
    `}
    })
    document.querySelector('.content').innerHTML = html
});
//解码decodeURIComponent
let userInfo = getCookie('userInfo') ? JSON.parse(decodeURIComponent(getCookie('userInfo'))) : null;
if (userInfo) {
    // 登录状态
    document.querySelector('.resgist').innerHTML = `${userInfo.nickname} 欢迎`
    //退出按钮
    document.querySelector('.out').addEventListener('click', () => {
        //删除cookie
        removeCookie('userInfo');
        //重新加载
        location.reload();
    })
} else {
    document.querySelector('.resgist').innerHTML = '<a href="login.html">登录</a>'
}

//酒店
axios.get(
    'http://39.98.112.34:8000/hotel/index'
)
    .then((res) => {
        let response = res.data.data
        console.log(res.data.data);
        let html = '';
        response.forEach(function (item, i) {
            if (i < 3) {
                html += `
               <a href="hotal.html">
                  
                    <div class='box1'>
                    <div class="left">${item.id}</div>
                    <div class="center">
                        <h3>${item.name}</h3>
                        <p>${item.districtName}</p>
                        <p>
                            <span style="color:red">4.7超棒</span>
                            <span>￥${item.priceStart}</span>
                        </p>
                    </div>
                    <div class="right"><img src="${item.photos}" alt="" ></div>
                    <div class="detail">
                    ${item.content}
                    </div>
                    </div>
               </a>
                `
            }

        });
        document.querySelector('.hotal').innerHTML = html;
    })
